<template>
  <div class="mock-record" v-for="(item, index) in mockRecords" :key="index">
    <div class="mock-record-title">{{ item.label }}</div>
    <div class="mock-record-time">
      <span>{{ item.value }}</span>
      <span>{{ item.time }}</span>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  mockRecords: {
    type: Array,
    default: () => [
      {
        label: "名称名称名称名称名称名称名称名称名称名称名称名称",
        value: "2024-06-23 16:45",
        time: "用时01:06:45",
      },
      {
        label: "名称名称名称名称名称名称名称名称名称名称名称名称",
        value: "2024-06-23 16:45",
        time: "用时01:06:45",
      },
      {
        label: "名称名称名称名称名称名称名称名称名称名称名称名称",
        value: "2024-06-23 16:45",
        time: "用时01:06:45",
      },
    ],
  },
});
</script>

<style lang="scss" scoped>
.mock-record {
  margin: 15px 12px 0 12px;
  &-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--otherFontColor);
  }
  &-time {
    font-size: 12px;
    color: #b3b3b3;
    margin-top: 5px;
    span {
      margin-right: 10px;
    }
  }
}
</style>
